/*
 * @Author: funlee
 * @Email: i@funlee.cn
 * @Date: 2019-06-27 17:32:36
 * @Description: 首页-应用工具-APP评论新消息检索-详情-预警中心
 *               挖掘查询-详情-预警中心
 */
import React from "react";
import { Pagination, Select, message, Input, DatePicker, Button } from "antd";
import { observer, inject } from "mobx-react";

const { RangePicker } = DatePicker;
const { Option } = Select;

const { Search } = Input;

@inject("APPIRWarningStore")
@observer
class APPIRWarning extends React.Component {
    state = {
        dateTypes: [{ name: "今日", id: "today" }, { name: "本月", id: "month" }, { name: "所有", id: "all" }],
        sourceTypes: [
            { name: "关联企业", id: "conpany" },
            { name: "使用人群", id: "people" },
            { name: "APP信息", id: "info" },
            { name: "众查反馈", id: "feedback" }
        ],
        selectDate: []
    };
    componentDidMount() {
        this.props.APPIRWarningStore.getData();
    }
    handleSetNature(type, value, isGetData = true) {
        this.props.APPIRWarningStore.setNature(type, value, isGetData);
    }

    handItem() {
        message.info("未做-推送预警");
    }
    onCheckOut() {
        message.info("未做-开始导出");
    }

    render() {
        const { dateTypes, sourceTypes } = this.state;
        const { listData } = this.props.APPIRWarningStore;
        return (
            <div className="APPIR-common-table-page">
                <div className="filter-top">
                    <Select
                        style={{ width: 140 }}
                        placeholder="今日"
                        onChange={value => this.handleSetNature("dateType", value, true)}
                    >
                        {dateTypes.map(d => (
                            <Option value={d.id} key={d.id}>
                                {d.name}
                            </Option>
                        ))}
                    </Select>
                    <Select
                        style={{ width: 180 }}
                        placeholder="请选择来源类型"
                        onChange={value => this.handleSetNature("sourceType", value, true)}
                    >
                        {sourceTypes.map(d => (
                            <Option value={d.id} key={d.id}>
                                {d.name}
                            </Option>
                        ))}
                    </Select>
                    <RangePicker
                        placeholder={["请选择日期", "请选择日期"]}
                        onChange={(_, dateString) => this.handleSetNature("selectDate", dateString, true)}
                        allowClear={false}
                    />
                    <div>
                        <Search
                            placeholder="请输入APP关键字或全称"
                            style={{ width: 220 }}
                            onChange={e => this.handleSetNature("keyWords", e.target.value.trim(), false)}
                            onSearch={() => this.props.APPIRWarningStore.getData()}
                        />
                    </div>

                    <Button onClick={() => this.onCheckOut()}>导出列表</Button>
                </div>
                <table className="lists-table">
                    <thead>
                        <tr>
                            <th>序号</th>
                            <th>来源</th>
                            <th>预警信息</th>
                            <th>预警时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        {listData.map((item, index) => (
                            <tr key={`APPIRWarning-${index}`}>
                                <td>{index + 1}</td>
                                <td>{item.resource}</td>
                                <td>{item.warningText}</td>
                                <td>{item.warningTime}</td>
                                <td>
                                    <span className="op-btn" onClick={() => this.handItem(item.id)}>
                                        推送预警
                                    </span>
                                </td>
                            </tr>
                        ))}
                    </tbody>
                </table>
                <div className="table-pagination">
                    <Pagination
                        defaultcurrent={6}
                        total={500}
                        onChange={(page, pageSize) => this.props.APPIRWarningStore.changePage(page, pageSize)}
                    />
                </div>
            </div>
        );
    }
}

export default APPIRWarning;
